<template>
  <div>
    <div class="main-header">
      <div class="box-center">
        <img class="logo" src="@/assets/image/logo.png" alt="">
        <div class="right-box-1">
          <a
              @click="toRouter(item)"
              href="javascript:void (0)"
              v-for="(item,index) in list"
              :key="index"
              class="font_color"
              :class="{active:active === item.id}">
              {{ item.name }}
            <span v-if="active === item.id"/>
          </a>
          <div class="item-box-center">
            <a class="btn" v-if="!isLogin" href="javascript:void (0)">登录/注册</a>
            <div class="userInfo open" v-else>
              <img class="avatar" v-if="!userInfo.icon" src="@/assets/image/avatar.png" alt="">
              <img class="avatar" v-else :src="userInfo.icon" alt="">
               <span class="username"> {{ userInfo.nickName }}</span>
                <div class="box-avatar">
                  <div class="top-2">
                    <img class="avatar" v-if="!userInfo.icon" src="@/assets/image/avatar.png" alt="">
                    <img class="avatar" v-else :src="userInfo.icon" alt="">
                    <div class="top-right-7">
                      <p class="name">
                        {{ userInfo.nickName }}
                        <i v-if="userInfo.gender==='M'" class="el-icon-male"/>
                        <i v-else style="color: #fc476d" class="el-icon-female"/>
                      </p>
                      <a class="font-size-12" @click="isShow=true" href="javascript:void (0)">编辑</a>
                    </div>
                  </div>
                  <div class="nav">
                    <span>联系电话： {{ userInfo.phone }}</span>
                  </div>
                  <div class="nav">
                    <span>兴趣爱好： {{ userInfo.habits || '暂无数据' }}</span>
                  </div>
                  <div class="nav">
                    <a class="btn btn1" @click="addSubmit" href="javascript:void (0)">去写论坛</a>
                    <a class="btn btn1" @click="removeLogin" href="javascript:void (0)">退出登录</a>
                  </div>
                </div>
            </div>

            <div class="switch">
              <a href="javascript:void (0)" @click="changeSwitch(2)" :class="isDark ? 'dark':'light'">
                <i class="iconfont icon-tianqitaiyangqichuang"></i>
              </a>
              <a href="javascript:void (0)" @click="changeSwitch(1)" :class="isDark ? 'light':'dark'">
                <i class="iconfont icon-heiyemoshi"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-box"></div>

    <lz-update-user :is-show="isShow"></lz-update-user>
    <lz-submit-article :is-show="isArticle" @closeForm="closeForm"></lz-submit-article>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        isArticle:false,
        isLogin:true,
        isShow:false,
        active:1,
        role:2,
        isDark:false,
        userInfo:{
          icon:""
        },
        list:[
          {id:1,name:'首页',role:2,to:'/'},
          {id:2,name:'论坛',role:2,to:'/forum'},
          {id:3,name:'优质会员',role:2,to:'/highMember'},
          {id:4,name:'论坛管理',role:1,to:'/forum_manage'},
          {id:5,name:'资料管理',role:1,to:'/information'},
          {id:6,name:'活动管理',role:1,to:'/activity'},
          {id:7,name:'我的活动',role:2,to:'/activityMine'},
          {id:8,name:'我的论坛',role:2,to:'/my_forum'},
          {id:9,name:'脏话系统',role:1,to:'/swearing'},
        ],

      }
    },
    methods:{
      toRouter(item){
        this.active = item.id
        this.$router.push(item.to).catch(err=>{})
      },

      addSubmit(){
        this.isArticle = true
      },
      closeForm(){
        this.isArticle = false
      },
      changeSwitch(item){
        if (item===1){
          window.document.documentElement.setAttribute('theme', 'dark');
          this.isDark=true
        }else{
          this.isDark = false
          window.document.documentElement.setAttribute('theme', 'light');
        }
      },

      removeLogin(){
        this.$message.error('已退出登录')
        this.$store.dispatch('removeLoginStatus')
        this.$router.push('/login').catch(err=>{})
      },

      roleType(role){
        if (role===2){
          this.list  = this.list.filter(value => {return value.role === role})
        }else{
          this.list = [
            {id:1,name:'首页',role:2,to:'/'},
            {id:2,name:'论坛',role:2,to:'/forum'},
            {id:3,name:'优质会员',role:2,to:'/highMember'},
            {id:4,name:'论坛管理',role:1,to:'/forum_manage'},
            {id:5,name:'资料管理',role:1,to:'/information'},
            {id:6,name:'活动管理',role:1,to:'/activity'},
            {id:7,name:'我的活动',role:2,to:'/activityMine'},
            {id:8,name:'我的论坛',role:2,to:'/my_forum'},
            {id:9,name:'脏话系统',role:1,to:'/swearing'},
          ]
        }

      },
      getUserInfo(){
        this.$store.dispatch('getUserList').then(res=>{
          console.log(res)
          if (res){
            this.userInfo = res
            this.role = res.role
            this.roleType(this.role)
          }
        })
      }

    },
    mounted() {
      let router  = this.$router
      this.roleType(this.role)
      this.active = router.currentRoute.meta.active
      this.getUserInfo()
    }
  }
</script>


<style scoped lang="scss">


  .main-header{
    width: 100%;
    height: 70px;
    position: fixed;
    background: #fff;
    z-index: 99;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
    background: var(--baseColor);
    display: flex;
    justify-content: center;
    .box-center{
      width: 1400px;
      height: 70px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      .logo{
        height: 30px;
        object-fit: contain;
      }
      .right-box-1{
        width: 1200px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: right;
        a{

          font-size: 14px;
          display: flex;
          position: relative;
          width: 150px;
          height: 70px;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          .font_color{
            color: var(--textColor);
          }
          span{
            display: flex;
            height: 2px;
            width: 60px;
            position: absolute;
            bottom: 0;
            background: var(--activeColor);
          }
        }
        .active{
          color: var(--activeColor);
        }
        .item-box-center{
          width: 240px;
          height: 70px;
          //background: #f6f6f6;
          display: flex;
          align-items: center;
          justify-content: right;
          .btn{
            width: 100px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fc476d;
            color: #fff;
            border-radius: 40px;
          }
          .userInfo{
            height: 70px;
            width: 100%;
            display: flex;
            align-items: center;
            position: relative;
            .avatar{
              width: 50px;
              height: 50px;
              object-fit: cover;
              border-radius: 50%;
              outline: 1px solid #f6f6f6;
            }
            .box-avatar{
              display: none;
              z-index: 0;
              position: absolute;
              width: 280px;
              min-height: 200px;
              background: var(--itemBgk);
              top: 70px;
              left: 0;
              box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
              border-radius: 15px;
              padding: 20px;
              box-sizing: border-box;
              .top-2{
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                .avatar{
                  width: 50px;
                  height: 50px;
                  object-fit: cover;
                  border-radius: 50%;
                  outline: 1px solid #f6f6f6;
                }
                .top-right-7{
                  box-sizing: border-box;
                  .name{
                    font-size: 14px;
                    color: var(--textColor);
                    text-indent: 10px;
                    i{
                      font-weight: 800;
                      font-size: 16px;
                      color: #5c85e4;
                    }
                  }
                  .font-size-12{
                    width: 40px;
                    height: 20px;
                    font-size: 12px;
                    color: #5c85e4;
                  }
                }

              }
              .nav{
                font-size: 14px;
                color: var(--textColor);
                margin-top: 10px;
                display: flex;
                align-items: center;
                .btn1{
                  margin-left: 10px;
                  margin-top: 15px;
                }
              }
            }

            .username{
              font-size: 14px;
              margin-left: 10px;
              color: var(--textColor);
              font-weight: 500;
            }
          }
          .userInfo:hover{
            .box-avatar{
             display: block;
            }

          }
          .switch{
            width: 80px;
            height: 30px;
            display: flex;
            border: 1px solid var(--switchBorder);
            justify-content: space-between;
            align-items: center;
            margin-left: 20px;
            border-radius: 30px;
            .light{
              i{
                color:  var(--activeColor);
                font-size: 20px;
              }
            }
            .dark{
              i{
                color:  #999;
                font-size: 18px;
              }
            }
          }

        }
      }
    }
  }
  .header-box{
    width: 100%;
    height: 70px;
  }
</style>
